import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

/// A text field that also has buttons to select all the text and copy the
/// selected text to the clipboard.
class ImageFilteredPage extends StatefulWidget {
  const ImageFilteredPage({super.key});

  @override
  State<ImageFilteredPage> createState() => _ImageFilteredPageState();
}

class _ImageFilteredPageState extends State<ImageFilteredPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              //左侧的照片
              Expanded(
                child: Image.asset("assets/images/banner3.png"),
              ),
              const SizedBox(width: 33),
              //右侧的照片
              buildExpanded2()
            ],
          ),
          SizedBox(height: 22),
          _buildSlider(),
        ],
      ),
    );
  }

  Expanded buildExpanded() {
    return Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text("sigmaX sigmaY: ${sliderValue.toStringAsFixed(2)} "),
          ImageFiltered(
            imageFilter: ImageFilter.blur(
              sigmaX: sliderValue,
              sigmaY: sliderValue,
            ),
            child: Image.asset("assets/images/banner3.png"),
          )
        ],
      ),
    );
  }

  Expanded buildExpanded2() {
    return Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text("模糊 + 倾斜"),
          SizedBox(height: 22,),
          ImageFiltered(
            imageFilter: ImageFilter.compose(
              // 模糊
              outer: ImageFilter.blur(
                sigmaX: 5,
                sigmaY: 5,
              ),
              // 倾斜
              inner: ImageFilter.matrix(Matrix4.skewY(pi / 8).storage),
            ),
            child: Image.asset("assets/images/banner3.png"),
          )
        ],
      ),
    );
  }

  double sliderValue = 0;
  String sliderText = "还没操作";

  Slider _buildSlider() {
    return Slider(
      value: sliderValue,
      max: 100,
      min: 0,
      label: "$sliderValue",
      onChanged: (value) {
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value) {
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value) {
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

  void updateSlider(value, text) {
    sliderValue = value;
    sliderText = text;

    setState(() {});
  }
}

void main() => runApp(const MaterialApp(home: ImageFilteredPage()));
